<template>
	<view>
		<!-- 个人信息 -->
		<view class="user-info">
			<view class="avatar-name">
				<u-avatar :src="src" shape="circle" size="60"></u-avatar>
				<text class="user-name" v-if="userInfo.name">{{userInfo.name}}</text>
				<button class="login-button" plain v-else @click="toLogin()">点此登录</button>
			</view>
			<view class="setting-icon">
				<u-icon name="setting" color="#fff" size="26"></u-icon>
			</view>
		</view>
		<!-- 订单类型 -->
		<view class="order-container">
			<uni-section title="我的订单">
				<template v-slot:right>
					<text class="slot-title-right" @click="toOrderList(99)">全部订单</text>
				</template>
			</uni-section>
			<view class="order-types">
				<uni-badge :text="item.count" absolute="rightTop" v-for="(item, index) in orderTypes" :key="index">
					<view class="order-item" @click="toOrderList(index)">
						<image :src="'/static/mine/icon-order-' + index + '.png'" class="order-type-icon"></image>
						<text class="order-type-name">{{item.name}}</text>
					</view>
				</uni-badge>
			</view>
		</view>
		<!-- 其它功能 -->
		<uni-list class="other-fuctions">
			<uni-list-item :title="item.title" showArrow clickable @click="toThisPage(item.flag)" v-for="item in listItems"
				:key="item.id">
				<template v-slot:header>
					<view class="slot-box">
						<image class="slot-image" :src="item.icon" mode="widthFix"></image>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import {
		orderStatus
	} from "@/utils/wx_orders"
	export default {
		data() {
			return {
				bgImageStyle: {
					'background-image': `url("/static/mine/img-user-bg.png") !important`,
					'background-size': 'cover'
				},
				src: "",
				userInfo: uni.getStorageSync('userInfo'),
				listItems: [{
					id: 0,
					title: "购物车",
					icon: "/static/mine/icon_cart.png",
					flag: "cart"
				}, {
					id: 1,
					title: "地址管理",
					icon: "/static/mine/icon_address.png",
					flag: "address"
				}, {
					id: 2,
					title: "兑换中心",
					icon: "/static/mine/icon_exchange.png",
					flag: "exchange"
				}, {
					id: 3,
					title: "联系客服",
					icon: "/static/mine/icon_service.png",
					flag: "service"
				}],
				orderTypes: []
			}
		},
		created() {
			this.getOrderStatus()
		},
		methods: {
			// 获取订单各类型的统计值
			async getOrderStatus() {
				try{
					let res = await orderStatus()
					this.orderTypes = res.data;
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			},
			toLogin() {
				console.log('login')
			},
			toOrderList(index) {
				uni.navigateTo({
					url: "/pages/mine/orders/index?index=" + index
				})
			},
			toThisPage(flag) {
				let url = "";
				switch (flag) {
					case "address":
						url = "/pages/mine/address/index";
						break;
					case "exchange":
						url = "/pages/mine/exchange/index";
						break;
					case "cart":
						url = "/pages/cart/index";
						break;
					case "service":
						uni.makePhoneCall({
							phoneNumber: "18211081947",
							success: () => {
								
							},
							fail: (e) => {
								
							}
						});
						break;
				}
				if(flag !== "service"){
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	// 用户信息
	/deep/ .user-info {
		height: 300rpx;
		box-sizing: border-box;
		padding: 0 4vw 6vw 4vw;
		background-image: url('../../static/mine/img-user-bg.png');
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.avatar-name {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.u-avatar__image {
				border: 3px solid #fff;
				border-radius: 50% !important;
				box-sizing: border-box;
				background-color: #fff;
			}

			.user-name {
				font-size: 40rpx;
				color: #fff;
				margin-left: 20rpx;
			}

			.login-button {
				margin-left: 20rpx;
				color: #fff;
				border-color: #fff;
			}
		}

	}

	//订单
	/deep/ .order-container {
		background-color: #fff;
		width: 94vw;
		height: 35vw;
		margin: auto;
		box-sizing: border-box;
		padding: 2vw;
		position: relative;
		top: -10vw;
		overflow: hidden;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 6rpx 4rpx rgba(0, 0, 0, .05);

		.uni-section__content-title {
			font-weight: bold;
			color: #333;
			font-size: 32rpx !important;
		}

		.slot-title-right {
			color: #aaa;
			font-size: 28rpx;
		}

		.order-types {
			display: flex;
			margin-top: 20rpx;
			align-items: center;
			width: 100%;
			justify-content: space-around;

			.order-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.order-type-icon {
					width: 70rpx;
					height: 70rpx;
				}

				.order-type-name {
					font-size: 26rpx;
					color: #666;
					text-align: center;
				}
			}

		}
	}

	// 其它功能
	/deep/ .other-fuctions {
		.uni-list {
			width: 94vw !important;
			margin: auto;
			overflow: hidden;
			border-radius: 20rpx;
			box-shadow: 0 0 6rpx 4rpx rgba(0, 0, 0, .07);
			margin-top: -5vw;
		}
	}

	/deep/ .uni-list-item__container {
		display: flex;
		align-items: center;

		.slot-box {
			width: 55rpx;
			height: 55rpx;
			position: relative;
			margin-right: 30rpx;

			.slot-image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				object-fit: cover;
			}
		}

		.uni-list-item__content-title {
			font-size: 26rpx;
		}
	}
</style>